<template>
  <div class="mobile-scheme-recommend">
    <Title
      v-slide-up
      title="推荐解决方案"
      color="#0e0b31"
      size="16"
      bold="700"
      sub-title="Recommended Solutions"
      sub-color="#878597"
      sub-size="14"
      left="27"
      block="#4580dd"
      block-width="2"
      block-pos="center"
    />
    <div class="g-box">
      <div v-slide-plus v-for="(i, k) in data" :key="k" class="g-item p18">
        <Title
          :title="i.name"
          color="#0e0b31"
          size="14"
          bold="700"
          line="1"
          :sub-title="i.introduce"
          sub-color="#383838"
          sub-size="14"
          gap="10"
          :line-height="21"
          sub-line="4"
          left="0"
        />
        <div class="view_btn f f-ac mt10" @click="handlePath(i.id)">
          查看详情
          <el-icon size="10" color="#fff">
            <IEpArrowRight />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const router = useRouter();
defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        list: "",
      };
    },
  },
});

// 跳转详情
const handlePath = (id: number) => {
  router.push({
    path: "/m/scheme",
    query: { id },
  });
};
</script>
<style lang="scss" scoped>
.mobile-scheme-recommend {
  width: 100%;
  background-color: #fff;
  position: relative;
  padding: 1.25rem;
  box-sizing: border-box;
  .g-box {
    margin-top: 1.25rem;
    .g-item {
      background: #fff;
      border: 1px solid #e5e5e5;
      transition: all 0.3s;
      margin-bottom: 1.25rem;
      &:last-child {
        margin-bottom: 0;
      }
      .view_btn {
        font-size: 0.875rem;
        letter-spacing: 0;
        line-height: 1.3125rem;
        color: #2a82e4;
        .el-icon {
          padding: 0.3125rem;
          background-color: #4580dd;
          border-radius: 50%;
          margin-left: 0.375rem;
        }
      }
    }
  }
}
</style>
